// 引入当前less
require('../less/personalInfo.less')

// 页面加载完成
document.ready(() => {
    // console.log('个人信息修改页');

    // 获取dom
    let iconBack = document.querySelector('#iconBack')//返回
    let nickName = document.querySelector('#nickName')//昵称
    let showSexPicker = document.querySelector('#showSexPicker')//选择性别
    let sex = document.querySelector('#sex')//性别
    let showBirthdayPicker = document.querySelector('#showBirthdayPicker')//选择生日
    let birthday = document.querySelector('#birthday')//生日
    let showProvincePicker = document.querySelector('#showProvincePicker')//选择省份
    let province = document.querySelector('#province')//省份
    let showCityPicker = document.querySelector('#showCityPicker')//选择城市
    let city = document.querySelector('#city')//城市
    let signArea = document.querySelector('#signArea')//签名  
    let signNum = document.querySelector('#signNum')//签名个数
    let saveBtn = document.querySelector('#saveBtn')//签名个数


    // 定义省份数组
    let provinceArr = []
    // 定义城市数组
    let cityArr = []

    // 点击iconBack，添加事件
    iconBack.addEventListener('click', function () {
        // 返回
        window.history.go(-1)
    });

    // 性别
    showSexPicker.addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            // 按确认时触发
            onConfirm: function (result) {
                console.log(result[0].label);
                // 把选择的数据显示到页面
                sex.textContent = result[0].label
            },
            title: '请选择性别'
        });
    });

    // 生日
    showBirthdayPicker.addEventListener('click', function () {
        weui.datePicker({
            start: 1900,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                // console.log(result);
                // 添加到页面
                birthday.textContent = result.map(function (v) {
                    // 补0
                    return window.$utils.padZero(v.value)
                    // 通过"-"连接
                }).join('-')
            },
            title: '请选择出生年月日'
        });
    });

    // 省份
    showProvincePicker.addEventListener('click', function () {
        weui.picker(provinceArr,
            {
                // 按确认时触发
                onConfirm: function (result) {
                    console.log(result);
                    // console.log(result[0].label);
                    // 把选择的数据显示到页面
                    province.textContent = result[0].label

                    // 发请求，获取当前省份所对应的城市
                    axios.get(window.$utils.BASE_URL + '/address/city/' + result[0].value)
                        .then((result) => {
                            let res = result.data
                            //  console.log(res);
                            if (res.status === 0) {
                                // 城市数据
                                cityArr = res.data.map((v) => {
                                    return {
                                        label: v.name,
                                        value: v.addressId
                                    }
                                })
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        })
                },
                title: '请选择省份'
            });
    });

    // 城市
    showCityPicker.addEventListener('click', function () {
        weui.picker(cityArr,
            {
                // 按确认时触发
                onConfirm: function (result) {
                    console.log(result);
                    // console.log(result[0].label);
                    // 把选择的数据显示到页面
                    city.textContent = result[0].label

                },
                title: '请选择城市'
            });
    });

    // 调用函数
    getProvince()
    // 封装函数，页面一打开就发请求获取省份
    function getProvince() {
        // 发送ajax请求
        axios.get(window.$utils.BASE_URL + '/address/province')
            .then((result) => {
                let res = result.data
                //  console.log(res);
                if (res.status === 0) {
                    //  省份数据
                    provinceArr = res.data.map((v) => {
                        return {
                            label: v.name,
                            value: v.addressId
                        }
                    })
                }
            })
            .catch((error) => {
                console.log(error);
            })
    }

    // 签名
    signArea.addEventListener('input', function () {
        // console.log(this.value);
        signNum.textContent = this.value.length
    })

    // 渲染数据
    // 从本地存储中获取数据，然后显示
    let userId = ''
    // 调用函数
    render()
    function render() {
        // 获取本地数据
        let user = JSON.parse(localStorage.getItem('user'))
        console.log(user);
        userId = user.userId
        nickName.value = user.nickname//昵称
        sex.textContent = user.gender ? user.gender : "请选择"//性别
        birthday.textContent = user.birthday ? window.$utils.forDate(user.birthday) : '请选择'//生日
        province.textContent = user.address ? user.address.split(",")[0] : '请选择'//省份
        city.textContent = user.address ? user.address.split(",")[1] : '请选择'//城市
        signArea.value = user.sign //签名
        signNum.textContent = user.sign ? user.sign.length : "0";  //签名个数
    }

    // 保存按钮
    saveBtn.addEventListener('click', function () {
        // 发送ajax请求
        axios.post(window.$utils.BASE_URL + "/users/userEdit",
            {
                "nickname": nickName.value,
                "gender": sex.textContent,
                "birthday": birthday.textContent,
                "address": [province.textContent, city.textContent],
                "sign": signArea.value,
                "userId": userId
            })
            .then((result)=>{
                let res = result.data
                // console.log(res);
                if(res.status === 0){
                    // 保存成功
                    window.$utils.showToast('icon-check', '修改成功')
                    // 跳转页面
                    window.setTimeout(function(){

                        location.href = 'my.html'
                    },2000)
                }else{
                    // 保存失败
                    window.$utils.showToast('icon-cuo', '修改失败')
                }
            })
            .catch((error) => {
                console.log(error);
            })
    })

})